<template>
  <div class="audit-page">
    <el-dialog
      v-model="visibleDialog"
      title="企业详细信息"
      @close="clearData"
      width="600px"
    >
      <div class="audit-content">
        <el-form
          :model="formModel"
          label-width="100px"
          label-position="left"
          ref="formRef"
        >
          <div class="sub-title">企业基本资料</div>
          <div class="form-1">
            <el-form-item label="企业全称" prop="enterpriseName">
              <el-input
                v-model="formModel.enterpriseName"
                maxlength="30"
                placeholder="请输入企业全称"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="英文全称" prop="enterpriseNameEn">
              <el-input
                v-model="formModel.enterpriseNameEn"
                maxlength="30"
                placeholder="请输入企业英文全称"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="企业地址" prop="address">
              <el-input
                v-model="formModel.address"
                maxlength="30"
                placeholder="请输入企业地址"
                readonly
              ></el-input>
            </el-form-item>
          </div>
          <div class="sub-title">企业营业信息</div>
          <div class="form-1">
            <el-form-item label="证件号码" prop="businessLicenseNo">
              <el-input
                v-model="formModel.businessLicenseNo"
                maxlength="30"
                placeholder="请输入证件号码"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="企业证件" prop="companyCert">
              <div class="upload-comp">
                <div class="cert-img">
                  <div class="title">营业执照</div>
                  <el-image
                    :src="formModel.businessLicenseCard[0]?.thumbnail"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    style="width: 120px; height: 120px"
                    :min-scale="0.2"
                    :preview-src-list="[
                      formModel.businessLicenseCard[0]?.thumbnail,
                    ]"
                    :initial-index="0"
                    fit="scale-down"
                  />
                </div>
                <div class="cert-img margin-left-16">
                  <div class="title">其他证件一</div>
                  <el-image
                    v-if="formModel.businessLicenseCard[1]?.thumbnail"
                    :src="formModel.businessLicenseCard[1]?.thumbnail"
                    style="width: 120px; height: 120px"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[
                      formModel.businessLicenseCard[1]?.thumbnail,
                    ]"
                    :initial-index="0"
                    fit="scale-down"
                  />
                </div>
                <div class="cert-img margin-left-16">
                  <div class="title">其他证件二</div>
                  <el-image
                    v-if="formModel.businessLicenseCard[2]?.thumbnail"
                    :src="formModel.businessLicenseCard[2]?.thumbnail"
                    style="width: 120px; height: 120px"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[
                      formModel.businessLicenseCard[2]?.thumbnail,
                    ]"
                    :initial-index="0"
                    fit="scale-down"
                  />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="法人证件" prop="personCert">
              <div class="person-cert">
                <div class="cert-img">
                  <div class="title">身份证正面</div>
                  <el-image
                    :src="formModel.legalPersonCard[0]?.thumbnail"
                    :zoom-rate="1.2"
                    style="width: 120px; height: 120px"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[
                      formModel.legalPersonCard[0]?.thumbnail,
                    ]"
                    :initial-index="0"
                    fit="scale-down"
                  />
                </div>
                <div class="cert-img margin-left-16">
                  <div class="title">身份证反面</div>
                  <el-image
                    :src="formModel.legalPersonCard[1]?.thumbnail"
                    :zoom-rate="1.2"
                    style="width: 120px; height: 120px"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[
                      formModel.legalPersonCard[1]?.thumbnail,
                    ]"
                    :initial-index="0"
                    fit="scale-down"
                  />
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="sub-title">企业联系人信息</div>
          <div class="form-1">
            <el-form-item label="姓名" prop="contactName">
              <el-input
                v-model="formModel.contactName"
                maxlength="30"
                placeholder="请输入姓名"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="contactIDCardNo">
              <el-input
                v-model="formModel.contactIDCardNo"
                maxlength="30"
                placeholder="请输入身份证号码"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="contactPhone">
              <el-input
                v-model="formModel.contactPhone"
                maxlength="30"
                placeholder="请输入手机号"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="contactEmail">
              <el-input
                v-model="formModel.contactEmail"
                maxlength="30"
                placeholder="请输入邮箱"
                readonly
              ></el-input>
            </el-form-item>
          </div>
          <div class="sub-title">审核信息</div>
          <div class="form-1">
            <el-form-item label="提交时间" prop="createTime">
              <el-input
                v-model="formModel.createTime"
                maxlength="30"
                placeholder="请输入提交时间"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="审核状态" prop="status">
              <el-input
                v-model="formModel.status"
                maxlength="30"
                placeholder="请输入审核状态"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="认证通过时间"
              prop="certifiedTime"
              v-if="alreadyFlag"
            >
              <el-input
                v-model="formModel.certifiedTime"
                maxlength="30"
                placeholder="请输入认证通过时间"
                readonly
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <template #footer>
        <div class="my-dialog-footer" v-if="!lookFlag">
          <el-button type="danger"  @click="cancel">驳回</el-button>
          <el-button @click="pass" type="primary" :loading="loading">
            通过
          </el-button>
        </div>
        <div class="my-dialog-footer" v-else>
          <el-button @click="alreadyCancel" type="primary"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { statusTransfer } from "./status";
interface BusiLicCard {
  fileId: string;
  fileName: string;
  sortCode: number;
  thumbnail: string;
}
interface FormData {
  id: string;
  enterpriseName: string;
  enterpriseNameEn: string;
  address: string;
  businessLicenseNo: string;
  businessLicenseCard: BusiLicCard[],
  legalPersonCard: BusiLicCard[],
  contactName: string;
  contactIDCardNo: string;
  contactPhone: string;
  contactEmail: string;
  createTime: string;
  status: string;
  certifiedTime: string;
}
const lookFlag = ref<boolean>(false);
const visibleDialog = ref<boolean>(false);
const alreadyFlag = ref<boolean>(false);
const formModel = ref<FormData>({
  id: "",
  enterpriseName: "",
  enterpriseNameEn: "",
  address: "",
  businessLicenseNo: "",
  businessLicenseCard: [],
  legalPersonCard: [],
  contactName: "",
  contactIDCardNo: "",
  contactPhone: "",
  contactEmail: "",
  createTime: "",
  status: "",
  certifiedTime: "",
});
const emit = defineEmits<{(event: 'auditSuccess'):void, (event:'openRejectPage'):void}>();
const loading = ref<boolean>(false);
const formRef: any = ref(null);
const idsArr = ref<string[]>([]);

const open = (flag?: any, secFlag?: any, id?: any) => {
  lookFlag.value = flag ? true : false;
  alreadyFlag.value = secFlag ? true : false;
  if (id) {
    getDetail(id);
  }
  visibleDialog.value = true;
};

// 获取详情
async function getDetail(id: any) {
  try {
    let res: any = await MyService.account.getPageDetail({ id: id });
    if (res.code == 200) {
      formModel.value = { ...res.data, status: statusTransfer(res.data.status)};
      idsArr.value.push(res.data.id);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (e) {}
}

// 驳回
function cancel() {
  visibleDialog.value = false;
  emit("openRejectPage");
}

// 已认证查看
function alreadyCancel() {
  visibleDialog.value = false;
}

// 通过
async function pass() {
  loading.value = true;
  const res: any = await MyService.account.companyAuth({
    status: 1,
    ids: [formModel.value.id],
  });
  if (res.code == 200) {
    ElMessage.success(res.msg);
    emit("auditSuccess");
    formRef.value.resetFields();
    visibleDialog.value = false;
  } else {
    ElMessage.error(res.msg);
  }
  loading.value = false;
}

const clearData = () => {
  formRef.value.resetFields();
};

defineExpose({
  open,
});
</script>

<style scoped>
.sub-title {
  margin-bottom: 24px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 21px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 14px;
  height: 21px;
  border-left: 2px solid rgba(0, 0, 0, 0.9);
}
.margin-left-16 {
  margin-left: 16px;
}
.form-1 {
  padding-left: 16px;
}
.upload-comp,
.person-cert {
  display: flex;
}
.my-dialog-footer {
  display: flex;
  width: 100%;
  justify-content: end;
}
</style>
